<template>
	<div class="feedback">
		<transition name="el-fade-in-linear" v-if="true">
			<div class="box-card" draggable="true" @ondragstart="ondragstart($event)" @ondragend="ondragend($event)">
				<div :class="['clearfix',isFeedbackIcon?'':'radius']">
					<span>{{$t("feedback.userFeedback")}}</span>
					<el-button @click="handleFeedbackIcon"
						style="float: right; padding: 3px 0; font-weight: 600;font-size: 20px;color: #fff;" type="text">
						<div :class="isFeedbackIcon?'onFeedback':'offFeedback'"></div>
					</el-button>
				</div>
				<div class="bottom-contetn" v-if="isFeedbackIcon">
					<div class="feedback-input">
						<el-form ref="form" label-width="0px">
							<el-form-item>
								<el-input type="textarea" :placeholder="this.$t('feedback.inputContent')" clearable
									@keyup.enter.native="handleSubmit">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input :placeholder="this.$t('feedback.inputName')" clearable
									@keyup.enter.native="handleSubmit">
									<i slot="prefix" class="el-input__icon el-icon-user"></i>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input :placeholder="this.$t('feedback.inputPhone')" clearable
									@keyup.enter.native="handleSubmit">
									<i slot="prefix" class="el-input__icon el-icon-phone"></i>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input :placeholder="this.$t('feedback.inputEemil')" clearable
									@keyup.enter.native="handleSubmit">
									<i slot="prefix" class="el-input__icon el-icon-message"></i>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input :placeholder="this.$t('feedback.inputAddress')" clearable
									@keyup.enter.native="handleSubmit">
									<i slot="prefix" class="el-input__icon el-icon-location-information"></i>
								</el-input>
							</el-form-item>
						</el-form>
					</div>
					<div class="feedback-button">
						<el-button style="width: 80px;background-color: rgba(21, 113, 196, 0.9);" :loading="loadingShow"
							type="primary" @click="handleSubmit">
							{{$t("submit")}}
						</el-button>
					</div>
				</div>
			</div>
		
		</transition>
	</div>

</template>

<script>
	export default {
		name: "Nav",
		data() {
			return {
				loadingShow: false,
				isFeedbackIcon: true
			}
		},
		mounted() {
			// console.log("test",this.$event)
		},
		methods: {
			handleSubmit() {
				this.loadingShow = true
				setTimeout(() => {
					this.loadingShow = false
				}, 1000)
			},
			handleFeedbackIcon() {
				if (this.isFeedbackIcon) {
					this.isFeedbackIcon = false
				} else {
					this.isFeedbackIcon = true
				}
			},
			// 拖拽用户体验对话框
			ondragstart(i) {
				console.log(i)
				alert()
			},
			ondragend(i) {
				console.log(i)

			}
		}
	}
</script>

<style scoped>
	
	/* 用户反馈 */
	.box-card {
		position: fixed;
		right: 20px;
		bottom: 20px;
		background-color: #fff;
		box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.8);
		border-radius: 11px;
		user-select: none;
		transition: all 0.3s;
		z-index: 999;
	}

	/* 展开收起 */
	.onFeedback {
		width: 20px;
		border: #fff solid 1px;
	}

	.offFeedback {
		width: 12px;
		height: 12px;
		border: #fff solid 2px;
	}

	.clearfix {
		width: 240px;
		z-index: 999;
		padding: 10px 20px;
		border-radius: 10px 10px 0 0;
		font-size: 15px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(21, 113, 196, 0.9);
	}

	.radius {
		border-radius: 10px;
	}

	.bottom-contetn {
		padding: 10px 20px;
		margin: 15px 0 0 0;
		/* border-top: solid 1px #c2c2c2; */
	}

	.feedback-button {
		display: flex;
		flex-direction: row-reverse;
	}

	.feedback-icon {
		position: fixed;
		z-index: 999;
		right: 30px;
		bottom: 30px;
		width: 40px;
		height: 40px;

	}
</style>
